<template>
  <div>
    <div
      style="display: flex;
    justify-content: space-between;
    align-items: center;
    
    "
    >
      <div style="width:250px;height:100vh;
     background: #ccc;
     ">
        <div
          style="display:flex;justify-content: space-between;
height: 60px;align-items: center;
padding: 0 5px;
"
        >
          <span>X</span>
          <img style="width:40px;height: 40px;" :src="img" alt />
          <p style="margin-top:10px">{{ name}}</p>
          <button @click="visible = true">设置</button>
        </div>
        <p style="text-align: center;">
          <button
            style="width:230px;
margin: 10px 0;
border: solid 1px #eee;
outline: none;
background-color: #eee;"
          >保存</button>
        </p>
        <p
          style="display: flex;justify-content: space-between;
padding: 0 10px;height: 40px;
border-bottom: 1px solid #eee;
"
        >
          <span>0篇文章</span>
          <button style="height:25px;line-height: 15px;">+ 新建</button>
        </p>
      </div>
    </div>

    <a-drawer
      v-model:visible="visible"
      title="更新知识库&emsp;&emsp;&emsp;&emsp;&emsp;
 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
 &emsp;&emsp;X"
      width="520"
      :closable="false"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
    >
      <p>
        名称
        <input
          style="
     width: 400px;
     height: 40px;
     outline: none;
     border: solid 1px #ccc;
     padding-left: 10px;
     margin-left: 15px;
     "
          type="text"
          v-model="name"
        />
      </p>
      <p>
        描述
        <input
          style="
     width: 400px;
     height: 80px;
     outline: none;
     border: solid 1px #ccc;
     padding-left: 10px;
     margin-left: 15px;
     "
          type="text"
          v-model="title"
        />
      </p>
      <p>
        评论
        <a-switch style="margin-left:15px" v-model:checked="checked1" />
      </p>
      <p>
        封面
        <img style="width:400px;height: 130px;margin-left: 15px;" :src="img" alt />
      </p>

      <p style="width:400px;
height: 80px;margin-top: 20px;
display: flex;
margin-left: 47px;
">
        <button
          style="height:40px;
background-color: #fff;
border: solid 1px #ccc;
width: 80px;
height:35px;
"
        >选择文件</button>

        <button
          style="height:35px;
background-color: #fff;

width: 60px;
border: solid 1px #f00;
color: #f00;
margin-left: 15px;
"
        >移除</button>
      </p>

      <template #footer>
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="gx()">更新</a-button>
      </template>
    </a-drawer>
  </div>
</template>

<script lang="ts">

import { defineComponent, onMounted, ref, reactive, toRefs } from 'vue';


import { tiaolist,tiaogeng } from '../../api'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { message } from 'ant-design-vue';

export default defineComponent({


  data() { return { text: '' }; },
  methods: { saveHtml(h: string) { console.log(h) } },

  setup() {

    const state = reactive({
      checked1: false,
      // checked2: false,
    });



    const route = useRoute()
    const id = route.params.id as string
    const token1 = localStorage.getItem('token1')
    const item: any = ref([])
    const bj: any = ref('')
    const name: any = ref('')
    const img = ref('')
    const title = ref('')


    // 更新
    const gx = () => {
      if (token1 === '管理员') {
         tiaogeng({name,title,id}).then(res=>{
           console.log(res);
           
         })

      } else {
        message.warning('访客无法进行此操作')
      }

    }




    onMounted(() => {
      tiaolist({ id }).then(res => {
        console.log(res);
        img.value=res.data.data.img
        name.value=res.data.data.username
        title.value=res.data.data.title

      })
    })



    const visible = ref<boolean>(false);

    const childrenDrawer = ref<boolean>(false);

    const showDrawer = () => {
      visible.value = true;
    };
    const onClose = () => {
      visible.value = false;
    };
    const showChildrenDrawer = () => {
      childrenDrawer.value = true;
    };
    return {
      item,
      bj,
      name,
img,
title,
      gx,
      visible,
      childrenDrawer,
      showDrawer,
      onClose,
      showChildrenDrawer,
      ...toRefs(state)
    }
  }
});
</script>

